<template>
  <cu-layout :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-detail-container`]">
      <view class="appointment-detail">
        <view class="title">
          <span>预约信息</span>
          <span class="status" :style="{ background: returnBackground(form.see_state) }">{{ form.see_state }}</span>
        </view>
      </view>
      <view class="appointment-row">
        <text class="left">约看姓名</text>
        <text>{{ form.name }}</text>
      </view>
      <view class="appointment-row">
        <text class="left">联系方式</text>
        <text>{{ form.tel }}</text>
      </view>
      <view class="appointment-row">
        <text class="left">约看时间</text>
        <text>{{ form.see_time }}</text>
      </view>
      <view class="appointment-card" @click="handleDetail(item)">
        <view class="title">
          <text>{{ form.project_name }}</text>
          <uv-icon name="arrow-right"></uv-icon>
        </view>
        <view class="address"> {{ form.district + form.business_district_name + '|' + form.subway_info }}</view>
        <view class="room-detail">
          <image v-if="form.type != 'project'" class="room-img" :src="form.room_type_cover" alt="" />
          <view class="wrap">
            <text v-if="form.type != 'project'" class="name">{{ form.room_type_name }}</text>
            <text v-if="form.type != 'project'" class="desc">{{ form.room_type_detail }}</text>
            <text v-if="form.type != 'project'" class="room-type">{{}}</text>
            <view class="price">
              <span>{{ form.min_price }}</span>
              <span class="unit">元/间/月/起</span>
            </view>
          </view>
        </view>
      </view>
      <view class="fixed-wrap">
        <view class="fixed-btn">
          <view v-if="form.see_state != '预约取消'" class="close" @click="handleCancel()">取消预约</view>
          <view class="phone" @click.stop="handlePhone(form.service_phone)">电话咨询</view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <uv-modal ref="modal" content="您确定要取消预约吗?" align="center" :showCancelButton="true" @confirm="confirm"></uv-modal>
    </view>
  </cu-layout>
</template>

<script>
import Helper from '@/common/helper'
import { mapActions, mapGetters } from 'vuex'
import { cancelHouse, seeHouseDetail } from './api'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      form: {},
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    returnBackground(value) {
      if (value == '成功预约') {
        return '#046f7e'
      } else if (value == '预约取消') {
        return '#999999'
      }
    },
    async getData() {
      const { id } = this.$Route.query
      const { data } = await seeHouseDetail({ id })
      const {
        name,
        tel,
        see_time,
        project_name,
        district,
        business_district_name,
        subway_info,
        room_type_name,
        room_type_detail,
        min_price,
        room_type_cover,
        room_type_id,
        project_id,
        type,
        see_state,
        service_phone,
        id: appointmentId,
      } = data
      this.form = {
        name,
        tel,
        see_time,
        project_name,
        district,
        business_district_name,
        subway_info,
        room_type_name,
        room_type_detail,
        min_price,
        room_type_cover,
        room_type_id,
        project_id,
        type,
        see_state,
        service_phone,
        id: appointmentId,
      }
    },
    handleDetail() {
      const { type, room_type_id, project_id } = this.form
      if (type === 'room') {
        this.$ROUTE.go('/pages/subpackage/housing-resources/room-detail/index', { roomTypeId: room_type_id, type: 'v2', projectId: project_id })
      } else if (type === 'room_type') {
        this.$ROUTE.go('/pages/subpackage/housing-resources/room-detail/index', { roomTypeId: room_type_id, type: '', projectId: project_id })
      } else {
        this.$ROUTE.go('/pages/subpackage/housing-resources/housing-detail/index', { projectId: project_id })
      }
    },
    handleCancel() {
      this.$refs.modal.open()
    },
    async confirm() {
      const { errcode } = await cancelHouse({ id: this.form.id })
      if (errcode === 0) {
        this.$refs.modal.close()
        uni.$uv.toast('取消成功')
        this.getData()
      }
    },
    handlePhone(phone) {
      Helper.callPhone(phone)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('detail-container')} {
  background: #f5f5f5;
  .appointment-detail {
    padding: 24rpx 32rpx 0;
    background: white;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    margin: 0 15rpx;
    .title {
      font-weight: 600;
      font-size: 16px;
      color: #222222;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #f5f5f5;
      padding-bottom: 24rpx;
      .status {
        font-weight: 600;
        font-size: 10px;
        color: #ffffff;
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
      }
    }
  }
  .appointment-row {
    padding: 22rpx 32rpx 22rpx;
    background: white;
    margin: 0 15rpx 0;
    display: flex;
    align-items: center;

    &:last-child {
      padding-bottom: 32rpx;
      border-bottom-left-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
    }
    .left {
      margin-right: 32rpx;
    }
  }
  .appointment-card {
    padding: 24rpx 32rpx;
    background: white;
    margin: 30rpx 15rpx 0;
    .title {
      font-weight: 600;
      font-size: 16px;
      color: #222222;
      display: flex;
      justify-content: space-between;
    }
    .address {
      margin: 16rpx 0;
      font-weight: 400;
      font-size: 11px;
      color: #666666;
    }
    .room-detail {
      display: flex;
      .room-img {
        width: 240rpx;
        height: 180rpx;
        border-radius: 14rpx;
        margin-right: 16rpx;
      }
      .wrap {
        display: flex;
        flex-direction: column;
      }
      .name {
        margin: 8rpx 0;
        font-weight: 600;
        font-size: 14px;
        color: #222222;
      }
      .desc {
        font-weight: 400;
        font-size: 11px;
        color: #666666;
      }
      .room-type {
        margin: 8rpx 0;
      }
      .price {
        font-weight: 600;
        font-size: 16px;
        color: $uv-price-primary;
        .unit {
          margin-left: 4rpx;
          font-size: 10px;
        }
      }
    }
  }
  .fixed-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 16rpx 16rpx 40rpx;
    background: white;
    position: fixed;
    bottom: 0;
  }
  .fixed-btn {
    display: flex;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #222222;
    .close {
      padding: 18rpx 52rpx;
      border: 2rpx solid #e6e6e6;
      font-weight: 400;
      font-size: 14px;
      color: #222222;
      border-radius: 40rpx;
      margin-right: 16rpx;
    }
    .phone {
      flex: 1;
      padding: 18rpx 0;
      border-radius: 40rpx;
      border: 2rpx solid #e6e6e6;
    }
  }
}
</style>
